/*
 * @Author: wangtao
 * @Date: 2020-08-20 14:07:42
 * @LastEditors: kanglang
 * @LastEditTime: 2021-02-18 17:24:18
 * @Description:
 */

import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  SafeAreaView,
  NativeModules,
  ScrollView,
  PixelRatio,
  Linking,
} from 'react-native';
import {
  iconWlHome,
  iconWlHomeGray,
  iconRefuel,
  iconParking,
  iconHotel,
  iconFood,
  driverRectangle,
  iconVoice,
  iconRightGray,
  iconCaveatGreen,
} from '../../../../image';
import { BackImage, msg, _, Button } from '../../../../common';
import {
  isAndroid,
  mainBgColorLightGray,
  screenWidth,
  mainBgColorWhite,
  px2dp,
  fontColorBlack,
  fontColorCoffee,
  fontColorSecDeepGray,
  fontColorLightGray,
  splitLineColorLightGray,
  fontColorDeepGray,
} from '../../../../common/styles';
import LoadInformation from '../../../../components/LoadInformation';
import supply from '../../../../api/supply';
import TypeAssemble from '../../components/type-assemble';

const { Submit } = Button;

export default class WayOrderConfirm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      detail: {
        id: '',
        addrBegin: null,
        addrEnd: [{}],
        wayBill: {},
        driver: {},
        supplyOwner: {}
      },
    };
  }

  componentDidMount() {
    const { navigation } = this.props;
    const state = navigation.state || {};
    const params = state.params || {};
    const { id } = params;

    supply
      .detailsWayBill({ id, identity: 3 })
      .then((res) => {
        if (res.success) {
          this.setState({
            detail: res.data,
          });
        } else {
          msg.emit('app:tip', { text: '获取失败' });
        }
      })
      .catch((err) => {});
  }

  render() {
    const { detail } = this.state;
    const { wayBill, supplyOwner } = detail;
    const { freight, goods, packageType, weight, remark, driverState } = wayBill;
    const { custHead, custName, wayBillCount, custMobile } = supplyOwner;
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
          <ScrollView
            style={{ width: '100%' }}
            contentContainerStyle={{
              paddingTop: px2dp(24),
              paddingBottom: px2dp(100),
              alignItems: 'center',
            }}
            showsVerticalScrollIndicator={false}
          >
            <View style={styles.shipping}>
              <Text style={{ fontSize: px2dp(32), color: fontColorBlack }}>
                运费
              </Text>
              {/* <Text style={{fontSize: px2dp(32), color: fontColorBlack}}>
                ¥
                <Text
                  style={{
                    fontSize: px2dp(40),
                    color: fontColorBlack,
                    fontWeight: 'bold',
                  }}>
                  {freight}
                </Text>
              </Text> */}
              <Text style={{ fontSize: px2dp(32), color: fontColorBlack }}>
                <Text
                  style={{
                    fontSize: px2dp(40),
                    color: fontColorBlack,
                    fontWeight: 'bold',
                  }}
                >
                  {freight}
                  元/吨
                </Text>
              </Text>
            </View>
            <View style={styles.freight}>
              <Text style={styles.title}>货物信息</Text>
              <View style={styles.desc}>
                {/* <Text style={styles.descText}>{goods}</Text>
                <Text style={styles.descLine}>|</Text>
                <Text style={styles.descText}>{packageType}</Text>
                <Text style={styles.descLine}>|</Text>
                <Text style={styles.descText}>{weight}</Text> */}
                <TypeAssemble
                  lineData={[goods, packageType, weight]}
                />
              </View>
            </View>
            {remark ?
              <View style={styles.driverMask}>
                <Text style={styles.maskTitle}>备注信息</Text>
                <View style={styles.maskDesc}>
                  <Text style={styles.maskDesText}>{remark}</Text>
                </View>
              </View> : null}
            {detail.addrBegin && (
              <LoadInformation
                detail={detail}
                style={{ marginTop: px2dp(24), width: '100%' }}
              />
            )}

            {/* <View style={styles.driverInfo}>
              <Text style={styles.driverTitle}>货主信息</Text>
              <View style={styles.driverDesc}>
                <View style={styles.driverInfoLeft}>
                  <Image
                    source={custHead ? {uri: custHead} : require('../../../../image/icons/defaultman.png')}
                    resizeMode="stretch"
                    style={{width: px2dp(120), height: px2dp(120)}}
                  />
                  <View style={styles.driverNameWrap}>
                    <View style={{flexDirection: 'row'}}>
                      <Text
                        style={{
                          fontSize: px2dp(32),
                          lineHeight: px2dp(40),
                          color: fontColorBlack,
                        }}>
                        {custName}
                      </Text>
                      <View style={styles.driverTag}>
                        <Image
                          source={iconCaveatGreen}
                          resizeMode="stretch"
                          style={{width: px2dp(22), height: px2dp(22)}}
                        />
                        <Text
                          style={{
                            fontSize: px2dp(22),
                            color: '#2CBD26',
                            marginLeft: 4,
                          }}>
                          已认证
                        </Text>
                      </View>
                    </View>
                    <Text
                      style={{
                        fontSize: px2dp(24),
                        color: fontColorSecDeepGray,
                      }}>
                      运单 {wayBillCount}
                    </Text>
                  </View>
                </View>
                <Image
                  source={iconRightGray}
                  resizeMode="stretch"
                  style={{width: px2dp(32), height: px2dp(32)}}
                />
              </View>
            </View> */}

          </ScrollView>

          <View style={styles.bottom}>
            {this.renderBottom(wayBill)}
          </View>
        </View>
      </SafeAreaView>
    );
  }

  // 底部状态
  renderBottom = (item) => {
    const { driverState, state, driverMobile } = item;
    if (driverState === 0 && state === 0) {
      return (
        <View style={{ flexDirection: 'row' }}>
          {/* <Submit
            text="拒绝"
            onClick={() => {
              this.submit(2);
            }}
            boxStyle={{
              width: px2dp(120),
              height: px2dp(56),
              backgroundColor: mainBgColorWhite,
              borderWidth: 1,
              borderColor: fontColorLightGray,
              borderRadius: px2dp(8),
            }}
            btnTextStyle={{
              fontSize: px2dp(28),
              color: fontColorSecDeepGray,
            }}
          /> */}

          <Submit
            text='确认'
            onClick={() => {
              this.submit(1);
            }}
            boxStyle={{
              width: px2dp(120),
              height: px2dp(56),
              backgroundColor: mainBgColorWhite,
              borderWidth: 1,
              borderColor: fontColorCoffee,
              borderRadius: px2dp(8),
              marginLeft: px2dp(24),
            }}
            btnTextStyle={{
              fontSize: px2dp(28),
              color: fontColorCoffee,
            }}
          />
        </View>
      );
    }
    if (driverState === 1 && state === 0) {
      return (
        <View style={{ flexDirection: 'row' }}>
          <Submit
            text='联系货主'
            onClick={() => {
              this.callServicePhone(driverMobile);
            }}
            boxStyle={{
              width: px2dp(140),
              height: px2dp(56),
              backgroundColor: mainBgColorWhite,
              borderWidth: 1,
              borderColor: fontColorLightGray,
              borderRadius: px2dp(8),
            }}
            btnTextStyle={{
              fontSize: px2dp(28),
              color: fontColorSecDeepGray,
            }}
          />

          <Submit
            text='装货'
            onClick={() => {
              msg.emit('router: goToNext', {
                routeName: 'ReceiptEdit',
                routerFrom: 'DriverMain',
                item,
              });
            }}
            boxStyle={{
              width: px2dp(120),
              height: px2dp(56),
              backgroundColor: mainBgColorWhite,
              borderWidth: 1,
              borderColor: fontColorCoffee,
              borderRadius: px2dp(8),
              marginLeft: px2dp(24),
            }}
            btnTextStyle={{
              fontSize: px2dp(28),
              color: fontColorCoffee,
            }}
          />
        </View>
      );
    }
    if (state === 1) {
      return (
        <View style={{ flexDirection: 'row' }}>
          <Submit
            text='卸货'
            onClick={() => {
              msg.emit('router: goToNext', {
                routeName: 'ReceiptEdit',
                routerFrom: 'DriverWayOrder',
                item
              });
            }}
            boxStyle={{
              width: px2dp(120),
              height: px2dp(56),
              backgroundColor: mainBgColorWhite,
              borderWidth: 1,
              borderColor: fontColorCoffee,
              borderRadius: px2dp(8),
              marginLeft: px2dp(24),
            }}
            btnTextStyle={{
              fontSize: px2dp(28),
              color: fontColorCoffee,
            }}
          />
        </View>
      );
    }
  };

    // 接受 1、拒绝 2
    submit = (state) => {
      const { detail } = this.state;
      const { wayBill } = detail;
      const { id } = wayBill;
      if (state === 1) {
        NativeModules.WindowModule.showWindow(
          {
            content: '确认接受该运单吗',
            title: '提示',
          },
          (e) => {
            if (e == 1) {
              supply.editStateByDriver({ id, state }).then((res) => {
                if (res.success) {
                  msg.emit('router: refreshRoutes', {
                    routeNames: ['WayOrderConfirm', 'DriverTab']
                  });
                  msg.emit('router: goToNext', { routeName: 'DriverTab' });
                } else {
                  msg.emit('app:tip', { text: res.msg });
                }
              });
            }
          },
        );
      }
      if (state === 2) {
        NativeModules.WindowModule.showWindow(
          {
            content: '确认拒绝该运单吗',
            title: '提示',
          },
          (e) => {
            if (e == 1) {
              supply.editStateByDriver({ id, state }).then((res) => {
                if (res.success) {
                  msg.emit('router: refreshRoutes', {
                    routeNames: ['WayOrderConfirm', 'DriverTab']
                  });
                  msg.emit('router: goToNext', { routeName: 'DriverTab' });
                } else {
                  msg.emit('app:tip', { text: res.msg });
                }
              });
            }
          },
        );
      }
    };

  callServicePhone = (phone) => {
    const url = `tel:${phone}`;
    Linking.canOpenURL(url)
      .then((supported) => {
        if (!supported) {
          NativeModules.WindowModule.showWindow(
            {
              content: `您的设备不支持该功能，请手动拨打${phone}`,
              onlyRightBtn: '1',
            },
            (e) => {},
          );
          return;
        }
        return Linking.openURL(url);
      })
      .catch((err) => {
        msg.emit('app:tip', { text: err });
      });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: mainBgColorLightGray,
    paddingHorizontal: px2dp(24),
    position: 'relative',
  },
  shipping: {
    backgroundColor: mainBgColorWhite,
    flexDirection: 'row',
    width: '100%',
    height: px2dp(110),
    borderRadius: px2dp(16),
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: px2dp(24),
  },
  freight: {
    backgroundColor: mainBgColorWhite,
    width: '100%',
    borderRadius: px2dp(16),
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: px2dp(24),
    marginTop: px2dp(24),
  },
  driverInfo: {
    backgroundColor: mainBgColorWhite,
    width: '100%',
    height: px2dp(260),
    borderRadius: px2dp(16),
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: px2dp(24),
    marginTop: px2dp(24),
  },
  title: {
    flex: 1,
    width: '100%',
    lineHeight: px2dp(92),
    fontSize: px2dp(32),
  },
  driverTitle: {
    width: '100%',
    height: px2dp(92),
    lineHeight: px2dp(92),
    fontSize: px2dp(32),
  },

  desc: {
    flex: 1,
    width: '100%',
    flexDirection: 'row',
    flexWrap: 'wrap',
    borderTopWidth: 1 / PixelRatio.get(),
    borderTopColor: splitLineColorLightGray,
    paddingVertical: px2dp(24)
  },
  driverDesc: {
    flex: 1,
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    borderTopWidth: 1 / PixelRatio.get(),
    borderTopColor: splitLineColorLightGray,
    justifyContent: 'space-between',
  },
  descText: {
    fontSize: px2dp(26),
    color: fontColorSecDeepGray,
  },
  driverInfoLeft: {
    flexDirection: 'row',
  },
  descLine: {
    color: fontColorLightGray,
    marginHorizontal: px2dp(16),
  },
  driverTag: {
    height: px2dp(40),
    borderRadius: px2dp(20),
    paddingHorizontal: px2dp(16),
    paddingVertical: px2dp(5),
    backgroundColor: '#E9F8E9',
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: px2dp(10),
  },
  driverNameWrap: {
    marginLeft: px2dp(24),
    justifyContent: 'space-between',
  },
  driverMask: {
    backgroundColor: mainBgColorWhite,
    width: '100%',
    marginTop: px2dp(24),
    borderRadius: px2dp(16),
    paddingHorizontal: px2dp(24),
  },
  maskTitle: {
    width: '100%',
    height: px2dp(92),
    lineHeight: px2dp(92),
    fontSize: px2dp(32),
  },

  maskDesc: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    borderTopWidth: 1 / PixelRatio.get(),
    borderTopColor: splitLineColorLightGray,
    justifyContent: 'space-between',
    paddingVertical: px2dp(20),
  },
  maskDesText: {
    color: fontColorSecDeepGray,
    fontSize: px2dp(28),
    lineHeight: px2dp(40),
  },
  bottom: {
    width: screenWidth,
    height: px2dp(100),
    backgroundColor: mainBgColorWhite,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingHorizontal: px2dp(24),
  },
});
